<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax 封装</title>
</head>
<body>
    <button class="get">GET 请求数据</button>
    <button class="post">post 请求数据</button>
    

    <script>
        // ajax  封装
        // promise 铺垫  
        var getbtn = document.getElementsByClassName("get")[0];
        var postbtn = document.getElementsByClassName("post")[0];
        
        // get请求 
        getbtn.onclick = function(){
            ajax({
                type:"get",
                url:"../php/register_get.php",
                data:{
                    user:"helloqa",
                    pass:"abc123",
                    phone:"180999776655",
                    email:"qwerty@111.com",
                },   // 请求发送到服务器的数据
                dataType:'json',
                success:function(result){  //result 形参(请求成功时候返回的数据)
                    console.log(result)
                }
            })
        }
        
        // post 请求 
        postbtn.onclick = function(){
            var user = "heelo"
            var pass = "aa"

            ajax({
                type:"post",
                url:"../php/login.php",
                data:{
                    user,
                    pass
                },
                // async:true,
                dataType:"json",
                success:result=>{
                    console.log(result)
                }
            })
        }

        // post  和  get 函数  合并一起  
        function ajax(options){
            var {type="get",url,data,async=true,dataType="text",success} = options;
            if(data instanceof Object){  // 如果数据是一个对象  循环对象 拼接成字符串 
                var str = "";
                for(var key in data){   // 循环对象 
                    console.log(key,data[key])
                    str += key+"="+data[key]+"&";
                }
                data = str.substring(0,str.length-1);   //字符串截取 
            }
            console.log(data);


            var xhr = new XMLHttpRequest();
            if(type=="get"){
                xhr.open("get",data?url+'?'+data:url,async);
                xhr.send()
            }else{
                xhr.open("post",url,async);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");   // 设置请求头的数据类型 
                xhr.send(data);   // 带参数 
            }
           
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status ==200){
                    // var result = JSON.parse(xhr.responseText);  不一定所有的返回数据都是 json
                    var result = xhr.responseText;
                    if(dataType=="json"){
                        result = JSON.parse(result);
                    }

                    if(success){
                        success(result)    // 把result 暴露给调用的环境 
                    }
                }
            }
        }

        
    </script>
</body>
</html>